<template>
    <div class="messageBox">
        <el-input @keyup.enter="getMessage" v-model="name" style="max-width: 200px;" placeholder="Please enter the name you are looking for"></el-input>
        <el-input @keyup.enter="getMessage" v-model="email" style="max-width: 200px;margin-left: 20px"
            placeholder="Please enter the email address you are looking for"></el-input>
        <el-button :icon="Search" style="margin-left: 20px" type="primary" @click="getMessage">Search</el-button>
        <el-table :data="tableData" style="width: calc(100vw - 280px)">
            <el-table-column prop="name" label="name" width="180" />
            <el-table-column prop="customerEmail" label="email" width="200" />
            <el-table-column label="message">
                <template #default="scope">
                    <span :title="scope.row.message">
                        {{ scope.row.message }}
                    </span>
                </template>
            </el-table-column>

            <el-table-column label="operate">
                <template #default="scope">
                    <el-button type="danger" :icon="Delete" @click="deleteMessage(scope.row.id)">Delete</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div style="margin-top: 20p;">
            <el-pagination layout="prev, pager, next" :total="pageData.total" page-size="7" :current-page="pageData.current" @current-change="getMessage" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { deleteCustomerMessageAPI, getCustomerMessageAPI, pageSearchMessageBoxAPI } from '@/apis/admin';
import { Delete, Search } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue'

const name = ref('')
const email = ref('')

const pageData = ref({
    current: 1,
    total: 0,
})

const tableData = ref([
    {
        id: 1,
        name: '2016-05-03',
        customerEmail: 'Tom',
        message: 'No. 189, Grove St, Los AngelesNo. 189, Grove St, Los AngelesNo. 189, Grove St, Los AngelesNo. 189, Grove St, Los AngelesNo. 189, Grove St, Los Angeles',
    }
])

const getMessage = async () => {
    const res = await pageSearchMessageBoxAPI(pageData.value.current, 7, name.value, email.value);

    if (res.data.code === 200) {
        tableData.value = res.data.data.rows

        pageData.value.total=res.data.data.total
    }
    else {
        ElMessage.error(res.data.msg)
    }
}

const deleteMessage = async (id: number) => {

    let flag = confirm('Do you confirm that you want to delete the current information')

    if (flag === false) return

    const res = await deleteCustomerMessageAPI(id)

    if (res.data.code === 200) {
        ElMessage.success('The deletion is successful')

        getMessage()
    }
    else {
        ElMessage.error(res.data.msg)
    }
}

onMounted(() => {
    getMessage()
})
</script>

<style lang="scss" scoped></style>